<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<jsp:include page="head.jsp"/>

<!--中间内容-->
<div class="layui-container fly-marginTop">
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title">
                <li class="layui-this">忘记密码</li>
            </ul>
            <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layui-form-pane">
                        <div class="layui-card-body" style="padding-top: 40px;">
                            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                                <div carousel-item>
                                    <%--第一个表单--%>
                                    <div>
                                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">登录邮箱</label>
                                                <div class="layui-input-block">
                                                    <input type="text" name="uEmail" lay-verify="email" id="email" placeholder="请填写邮箱信息" autocomplete="off" class="layui-input">
                                                    <input type="hidden" id="flag" value="3">
                                                    <input type="hidden" name="checkemail"  id="checkemail">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">邮箱验证码</label>
                                                <div class="layui-input-inline">
                                                        <input type="text" id="emailcode" name="emailcode" lay-verify="required" placeholder="请输入邮箱验证码" autocomplete="off" class="layui-input">
                                                        <input type="hidden"  name="hiddencode" id="hiddencode" value="">
                                                </div>
                                                <input id="send-email-code" class="layui-btn layui-btn-normal" name="send-email-code" type="button"   value="获取验证码"  />
                                            </div>
                                            <div class="layui-form-item">
                                                <div class="layui-input-block">
                                                    <button class="layui-btn" lay-submit type="button" lay-filter="formStep">
                                                        &emsp;下一步&emsp;
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <%--第二个表单--%>
                                    <div>
                                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">新密码</label>
                                                <div class="layui-input-block">
                                                    <input type="password" name="password" lay-verify="" id="pwd" placeholder="请填写密码" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">确认密码</label>
                                                <div class="layui-input-block">
                                                    <input type="password" name="pwd2" lay-verify=""  id="pwd2" placeholder="确认密码" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-form-item">
                                                <div class="layui-input-block">
                                                    <button class="layui-btn" lay-submit type="button" lay-filter="formStep2">
                                                        &emsp;确认修改&emsp;
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <%--第三个表单--%>
                                    <div>
                                        <div style="text-align: center;margin-top: 90px;">
                                            <i class="layui-icon layui-circle"
                                               style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                            <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                                重置密码成功
                                            </div>
                                            <div style="font-size: 14px;color: #666;margin-top: 20px;"></div>
                                        </div>
                                        <div style="text-align: center;margin-top: 50px;">
                                            <button class="layui-btn next">点击登录</button>
                                            <button class="layui-btn layui-btn-primary">返回首页</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<jsp:include page="bottom.jsp"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/emailcodeVerify.js" ></script>
<script src="${pageContext.request.contextPath}/step/step-lay/step.js" type="text/javascript" charset="utf-8"></script>

    <script>
        layui.use(['form','jquery'],function(){
            var form = layui.form,
                $ = layui.$;
        });
        //邮箱是否被注册过
        layui.use(['form','layer'],function(){
            var form = layui.form;

            $("#email").blur(function(){
                var msg ="";
                var email = $("#email").val();
                $.ajax({
                    type: "POST",
                    url: '/txblog/user/checkUserEmail.do',
                    async: false, // 使用同步的方法
                    data: {
                        'email':email
                    },
                    dataType: 'json',
                    success: function(result) {
                        if (result==1) {
                            msg = "邮箱未注册！";
                        }
                    }
                });
                if(msg!=""){
                    //设置隐藏域的值
                    $("#checkemail").val("no");
                    layer.msg(msg, {icon:5});
                }else{
                    //设置隐藏域的值
                    $("#checkemail").val("yes");
                }

            });
        });
    </script>

<script>
        layui.config({
            base:'${pageContext.request.contextPath}/step/step-lay/'
        }).use([ 'form', 'step'], function () {
            var $ = layui.$
                , form = layui.form
                , step = layui.step;

            step.render({
                elem: '#stepForm',
                filter: 'stepForm',
                width: '100%', //设置容器宽度
                stepWidth: '750px',
                height: '500px',
                stepItems: [{
                    title: '填写登录邮箱'
                }, {
                    title: '修改密码'
                }, {
                    title: '修改成功'
                }]
            });


            form.on('submit(formStep)', function (data) {
                /*第一个表单验证*/
                //  验证码判断判断验证码是否填写正确
                //发送ajax请求
                var emailcode = $("#emailcode").val();
                var hiddencode = $("#hiddencode").val();
                var flag="1";
                $.ajax({
                    type:"get",
                    url:"/txblog/user/checkCode.do",
                    async:false,
                    data:{"emailcode":emailcode,"hiddencode":hiddencode},
                    success:function(obj){
                        flag = obj;
                        // alert(obj);
                    },
                    dataType:"text"
                });
                if (flag=='0') {
                    layer.msg('验证码错误！', {icon:5});
                    return true;
                }
                if($("#checkemail").val()=="no"){
                    layer.msg('邮箱未注册', {icon:5});
                    return true;
                }
                    step.next('#stepForm');
                    return false;
            });
            /*第二个校验表单*/
            form.on('submit(formStep2)', function (data) {
                var password = $("#pwd").val();
                var pwd2 = $("#pwd2").val();
                console.log("pa1="+password+"="+!(/^[\S]{6,16}$/.test(password)));
                console.log("pwd2="+pwd2);
                if(!(/^[\S]{6,16}$/.test(password))){
                    layer.msg('密码必须6到16位，且不能出现空格！', {icon:5});
                    return true;
                }
                if(password!=pwd2){
                    layer.msg('两次密码不一致！', {icon:5});
                    return true;
                }
                var email = $("#email").val();
                console.log("password="+password+"email="+email);

                /*发送请求修改密码*/
                $.ajax({
                    type: "POST",
                    url: '/txblog/user/student/updatepwd.do',
                    async: false, // 使用同步的方法
                    data: {
                        'uEmail':email,
                        'uPwd':password
                    },
                    success: function(result) {
                        if (result.code==0) {
                            step.next('#stepForm');
                            return false;
                        }else{
                            layer.msg('修改失败！', {icon:5});
                            return true;
                        }
                    }
                });

            });

            $('.next').click(function () {//点击登录
                window.location.href="${pageContext.request.contextPath}/user/to_login.do";
            });
            $('.layui-btn-primary').click(function () {//返回首页
                window.location.href="${pageContext.request.contextPath}/blog/index.do";
            });

        })
    </script>